window.onload=function(){
	var paper = Raphael(document.getElementById("notepad"), 800, 800);
	
	var lables = [];
	var contents = [];
	$("#column thead th").each(function(){
		lables.push($(this).html());
	});
	$("#column tbody td").each(function(){
		contents.push($(this).html());
	});
	
	//判断表中的数据是否位数字
	for(var i=0;i<contents.length;i++)
	{
		if(Number(contents[i]) != contents[i])
		{
			alert("请输入有效数字！");
			return false;
		}
	}
	
	
	Number.prototype.toFixed=function(num) 
   { 
   //重新构造toFixed方法,IE5.0+ 
   with(Math)this.NO=round(this.valueOf()*pow(10,num))/pow(10,num); 
   return String(/\./g.exec(this.NO)?this.NO:this.NO+"."+String(Math.pow(10,num)).substr(1,num)); 
   } 
	
	
	//设置横纵坐标轴的长度
	var x_Length = 450;
	var y_Length = 300;
	
	
	//设置Y轴刻度个数
	var Scale_num = 10;
	//设置Y轴刻度的值
	var contents_max = contents[0];
	//判断表中的最大数值
	for(var m=0;m<contents.length;m++){
		contents_max = (Math.max(contents_max,contents[m]));
	}
	//设置Y轴刻度数值
	var Scale_amount = contents_max/Scale_num;
	//设置Y轴刻度间隔
	var Scale_Interval = (y_Length-30)/Scale_num;
	
	
	//设置距离X轴终点距离
	var Lable_End = 40;
	//设置X轴刻度间隔
	var Lable_Interval = (x_Length - Lable_End)/lables.length;
	
	
	//设置柱的宽度
	var column_width = Lable_Interval/2;
	
	
	//设置0刻度坐标
	var col_x = 50;
	var col_y = 350;
	
	
	//画出X坐标轴
	var line_path_x = "M" + col_x + " " + col_y + " " + "l" + x_Length + " 0";
	paper.path({stroke: "black", "stroke-width": "2"}, line_path_x);
	//X坐标轴文字
	var x_txt = paper.text((col_x + x_Length), (col_y + 20), "Movie");
	//文字底色
	x_txt.attr({fill:"black" , "font-size" : "15"});
		
	
	//画出Y坐标轴
	var line_path_y = "M" + col_x + " " + col_y + " " + "l0 -" + y_Length;
	paper.path({stroke: "black", "stroke-width": "2"}, line_path_y);
	//Y坐标轴文字
	var y_txt = paper.text((col_x - 30), (col_y - y_Length), "Ticket");
	//文字底色
	y_txt.attr({fill:"black" , "font-size" : "15"});	
	
	//设置颜色库
	var start = 0;
	
	//画柱
	var c = [];
	//柱下文字
	var txt1 = [];
	//柱上文字
	var txt2 = [];
	
	//画柱
	for(var i=0;i<lables.length;i++)
	{
		if(start > 0.9)
		{
			start = .1;
		}
		else
		{
			start += .1;			
		}
		var color = "hsb(" + start + ", 1, .6)";
		var bcolor = "hsb(" + start + ", 1, 1)";
		
		c[i] = paper.rect((col_x + (column_width/2) + Lable_Interval * i), (col_y - (contents[i] / Scale_amount * Scale_Interval)), column_width, (contents[i] / Scale_amount * Scale_Interval), 0);
		c[i].attr({gradient: "90-" + bcolor + "-" + color});
		
		//柱下文字
		txt1[i] = paper.text((col_x + (column_width/2) + (column_width/2) + Lable_Interval * i), (col_y + 20), lables[i]);
		//文字底色
		txt1[i].attr({fill: "black" , "font-size" : "15"});
		
		//柱上文字
		txt2[i] = paper.text((col_x + (column_width/2) + (column_width/2) + Lable_Interval * i), (col_y - (contents[i] / Scale_amount * Scale_Interval) - 10), contents[i]);
		//文字底色s
		txt2[i].attr({fill: "black", opacity: .3, "font-size" : "15"});
		
		mouse(c[i], txt1[i], txt2[i]);
	}
	
	//设置刻度
	for(var j=0;j<=Scale_num;j++){
		
		var scale_path = "M" + col_x + " " + (col_y - j * Scale_Interval) + " l" + (-10) + " 0";
		paper.path({stroke: "black", "stroke-width": "2"},scale_path);
		
		if(j==0)
		{
			//设置0刻度
			var txt1 = paper.text((col_x-20), (col_y+20), j);
			//文字底色
			txt1.attr({fill: "black" , "font-size" : "15"});
		}
		else
		{
			//设置Y轴上的刻度
			var txt1 = paper.text((col_x-30), (col_y - j * Scale_Interval), (Math.round(Scale_amount*10)/10*j).toFixed(2));
			//文字底色
			txt1.attr({fill: "black" , "font-size" : "15"});
		}
	}
}

function mouse(temp_column, temp_txt_1, temp_txt_2)
{
	temp_column.mouseover(function () {
		temp_column.animate({stroke:"red","stroke-width":"3"}, 200);
		temp_txt_1.animate({fill: "red"}, 200);
		temp_txt_2.animate({fill: "red", opacity: 1}, 200);
	});
	
	temp_column.mouseout(function () {
		temp_column.animate({stroke:"black","stroke-width":"1"}, 200);
		temp_txt_1.animate({fill: "black"}, 200);
		temp_txt_2.animate({fill: "black", opacity: .3}, 200);
	});
}
